<template>
	<h2>自定义hook函数</h2>
	<h2>x:{{ x }},y:{{ y }}</h2>
</template>

<script lang="ts">
import { Page } from "csstype"
import { defineComponent, onBeforeUnmount, onMounted, ref } from "vue"

export default defineComponent({
	name: "App",
	// 需求1：用户在页面中点击页面，把点击的位置的横纵坐标手机起来并暴漏出去
	setup() {
		const x = ref(-1)
		const y = ref(-1)

		// 点击事件的回调函数
		// 页面加载完毕的生命周期组合API
		const clickHandler = (event:any) => {
			x.value = event.pageX
			y.value = event.pageY
		}

		onMounted(() => {
			window.addEventListener("click", clickHandler)
		})

		// 页面卸载之前的生命周期组合API
		onBeforeUnmount(() => {
			window.removeEventListener('click',clickHandler)
		}),

		return {
			x,
			y,
			clickHandler
		}
	}
})
</script>

<style></style>
